<script setup lang="ts">
import {reactive, ref, watch, defineProps, defineEmits} from "vue";
import type {ButtonMaterialType} from "@/data-type/material.type";

const props = defineProps<{material:ButtonMaterialType}>();
// const emit = defineEmits<{(event: 'change', material: ButtonMaterialType):void}>();
const activeKey = ref('1');
let formState = reactive<ButtonMaterialType>(props.material);

watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});

const btnComponentType = [
  {
    value: 'primary',
    label: 'primary',
  },
  {
    value: 'ghost',
    label: 'ghost',
  },
  {
    value: 'dashed',
    label: 'dashed',
  },
  {
    value: 'link',
    label: 'link',
  }
];

</script>

<template>
  <a-tabs v-model:activeKey="activeKey" style="background:#fff;padding: 4px 8px;">
    <a-tab-pane key="1" tab="属性">
      <div style="display: none;">{{props}}</div>
      <a-form
          :model="formState"
      >
        <a-form-item
            label="名称"
            name="text"
        >
          <a-input v-model:value="formState.props.text" placeholder="按钮文本内容"/>
        </a-form-item>
        <a-form-item
            label="类型"
            name="componentType"
        >
          <a-select v-model:value="formState.props.btnType">
            <a-select-option v-for="item in btnComponentType" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="样式" force-render>样式</a-tab-pane>
    <a-tab-pane key="3" tab="事件">事件</a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
